<template>
  <div class="addinfo">
    <div class="main_content">
      <div class="content_serach">
        <Input  v-model="text" @on-change="assetsChange"  placeholder="请输入备件料号查找" />
      </div>
      <div class="content_list">
        <template v-for="list in listArr">
          <template v-for="item in list.purchaseNos">
            <div class="list_item" :key="item.id" @click="puritemClick(item)">
              <template>
                <span class="text" :style="{color:item.active ? '#035BEB' : '#00142D' }"  v-if="titleText === '备件料号'">{{item.materielNo}}</span>
                <span class="text" :style="{color:item.active ? '#035BEB' : '#00142D' }" v-else>{{item.purchaseOrderNo}}</span>
              </template>
              <span class="imgBox" v-if="item.active === true">
                  <img src="@/assets/imgs/maintenance/rightDui.png" alt=""/>
              </span>
            </div>
          </template>
        </template>
      </div>
    </div>
    <div class="editBtn">
       <span class="saveBtn" @click="saveMatence">{{$t('maintenance.Enter')}}</span>
       <span class="text" @click="navBarclick">{{$t('maintenance.Cancle')}}</span>
    </div>
  </div>
</template>

<script>
import {checkMaterielNo} from '@/api/maintenance'
export default {
  name: "addspareinfo",
  props:{
    titleText:{
      type:String,
      default:''
    }
  },
  data(){
    return {
      text:'',
      timerId:'',
      listArr:[]
    }
  },
  methods:{
    puritemClick(data){
      this.clearStatus(this.listArr)
      this.$set(data,'active',true)
      this.$forceUpdate()
    },
    clearListinfo(){
      this.text = ''
      this.listArr = []
    },
    assetsChange() {
      if (this.timerId) {
        clearTimeout(this.timerId)
      }
      this.timerId = setTimeout(() => {
        this.getDataList()
      }, 550)
    },
    clearStatus(data){
      if (data && data.length){
        data.forEach(val=>{
          if (val.purchaseNos && val.purchaseNos.length){
            val.purchaseNos.forEach(item=>item.active = false)
          }
        })
      }
    },
    getDataList(){
      this.listArr = []
      const obj = {
        text:this.text,
        orgId:this.$route.query.orgId
      }
      checkMaterielNo(obj).then(res=>{
        if (res.data && res.data.length){
          this.listArr = res.data
          this.clearStatus(this.listArr)
        }
      })
    },
    saveMatence(){
      let tarGetobj = {}
      this.listArr.forEach(val=>{
        if (val.purchaseNos && val.purchaseNos.length){
          val.purchaseNos.forEach(item=>{
            if (item.active === true){
              tarGetobj = item
            }
          })
        }
      })
      this.$emit('getListobj',tarGetobj)
      this.navBarclick()
    },
    navBarclick(){
      this.$emit('changeStatus',false)
    },
  }
}
</script>

<style scoped lang="scss">
@import "~@/views/devScene/components/index.scss";
@import "index.scss";
</style>
